<template>
    <div  style="background-color: #ffffff;">
        <el-row>
            <el-col :span="14">
                <div style="border: 1px solid red;height: 400px;width: 100%;" id="chart12"></div>
            </el-col>
            <el-col :span="10">
                <div id="chart22" style="border: 1px solid red;height: 400px;width: 100%;text-align: center;"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { getExceptionTypeCount, getCloseACaseDate } from "@/api/business/bugs"
export default {
    name: 'Model2',
    data() {
        return {
            totalMax:null,
        };
    },
    computed: {
    },
    created() {
        // this.getExceptionTypeDate()
    },
    mounted() {
        // this.initEChart();
        this.getExceptionTypeDate()
        this.getCloseACaseDateCount()
    },
    methods: {
        initEChart1(CountData) {

            var myChart1 = echarts.init(document.getElementById('chart12'));
            // var myChart2 = echarts.init(document.getElementById('chart22'));

            const option1 = {
                title: {
                    text: '员工Bug结案率',
                    position: 'center',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {
                    // orient: 'vertical',
                    // right: 10,
                    // top: 20,
                    bottom: 5,
                    data: ['问题总数', '关结数量', '结案率']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: CountData[0]?CountData[0]:[]
                        // ['张三', '李四', '王五', '赵六', '黄八', '刘久']
                        ,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '问题总数/关结数量',
                        min: 0,
                        max: this.totalMax?this.totalMax:250,
                        interval: 50,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: 'value',
                        name: '结案率',
                        min: 0,
                        max: 100,
                        interval: 10,
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    }
                ],
                series: [
                    {
                        name: '问题总数',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '';
                            }
                        },
                        data: CountData[1]?CountData[1]:[]
                        // [
                        //     77.0, 123.2, 76.7, 135.6, 162.2, 155,
                        // ]
                        ,
                        label: {
                            show: true,
                            position: 'top',
                            valueAnimation: true
                        }
                    },
                    {
                        name: '关结数量',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '';
                            }
                        },
                        data: CountData[2]?CountData[2]:[]
                        // [
                        //     82.6, 75.9, 70.7, 175.6, 182.2, 148
                        // ]
                        ,
                        label: {
                            show: true,
                            position: 'top',
                            valueAnimation: true
                        }
                    },
                    {
                        name: '结案率',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '%';
                            }
                        },
                        data: CountData[3]?CountData[3]:[]
                        // [83.2, 84.3, 86.5, 88.3, 98.5, 99.5]
                        ,
                        label: {
                            show: true,
                            position: 'top',
                            valueAnimation: true
                        }
                    }
                ]
            };

            myChart1.setOption(option1);
        },
        initEChart2(CountData) {
            var myChart2 = echarts.init(document.getElementById('chart22'));

            const option2 = {
                title: {
                    text: '异常类别状况统计',
                    position: 'left',
                    left: 'center',
                },
                dataset: {
                    source: CountData ? CountData : []
                    // [
                    //     ['数量', 'product'],
                    //     // [89.3, 58212, 'Matcha Latte'],
                    //     // [57.1, 78254, 'Milk Tea'],
                    //     // [74.4, 41032, 'Cheese Cocoa'],
                    //     // [50.1, 12755, 'Cheese Brownie'],
                    //     [200, 'PIP异常'],
                    //     [391, '宕机'],
                    //     [445, '闪线'],
                    //     [518, '睡眠唤不醒'],
                    //     [110, '花屏'],
                    //     [520, '闪屏'],
                    //     [125, '黑屏']
                    // ]
                },
                grid: { containLabel: true },
                xAxis: { name: '数量' },
                yAxis: { type: 'category' },
                // visualMap: {
                //   orient: 'horizontal',
                //   left: 'center',
                //   min: 10,
                //   max: 100,
                //   text: ['High Score', 'Low Score'],
                //   // Map the score column to color
                //   dimension: 0,
                //   inRange: {
                //     color: ['#65B581', '#FFCE34', '#FD665F']
                //   }
                // },
                series: [
                    {
                        type: 'bar',
                        encode: {
                            // Map the "amount" column to X axis.
                            x: '数量',
                            // Map the "product" column to Y axis
                            y: 'exceptionCode'
                        },
                        label: {
                            show: true,
                            position: 'right',
                            valueAnimation: true
                        }
                    }
                ]
            };

            myChart2.setOption(option2);
        },
        getExceptionTypeDate() {
            getExceptionTypeCount().then(res => {
                // console.log(res)
                this.initEChart2(res.data);
            })
        },
        getCloseACaseDateCount() {
            getCloseACaseDate().then(res=>{
                // console.log(res)
                if(res.data[1]){
                  var max= Math.max(...res.data[1]);
                  var m=max%100
                  if(m==0){
                    this.totalMax=max
                  }else{
                    //向上取整
                    this.totalMax=(Math.ceil(max/100))*100
                  }
                }
                this.initEChart1(res.data);
            })
        }
    },
};
</script>

<style scoped></style>
